<template>
  <div id="app" style="padding: 0px 10px 0 16px">
    <router-view v-if="hasSetWidthHeight"></router-view>
  </div>
</template>

<script>
import {util} from "@/utils/common"
import { mapMutations } from 'vuex'

export default {
  name: 'App',
  data(){
    return{              
      hasSetWidthHeight:false,
      first:true
    }
  },      
  mounted() {
    //重新设置一下app的高度，这是qiankun带来的问题
    let frame = document.getElementById('frame')
    let app = document.getElementById('app')
    let height = frame.clientHeight
    app.style.height = height + 'px'
    this.hasSetWidthHeight = true

    window.addEventListener('resize',() => {
      this.hasSetWidthHeight = false
      let height = frame.clientHeight
      app.style.height = height + 'px'
      setTimeout(() => {
        this.hasSetWidthHeight = true
      },50)
    })
    
    //在app组件里 观察用户以及项目信息，所有主应用传来的公共方法都在common.js的util里
    util.watchGlobalInfo ((state, prevState) => {
      let {userInfo,projectInfo,buttonPageObj,secondRouters,theme} = state
      let prevTheme = prevState.theme
      let prevProjectInfo = prevState.projectInfo
      let prevUserInfo = prevState.userInfo
      let prevButtonPageObj = prevState.buttonPageObj
      let prevSecondRouters = prevState.secondRouters
      if(this.first || theme!=prevTheme){
        this.setTheme(theme)
      }
      if(this.first || prevButtonPageObj!=buttonPageObj){
        this.setButtonPageObj(buttonPageObj)
      }
      if(this.first || prevSecondRouters!=secondRouters){
        this.setSecondRouters(secondRouters)
      }
      if(this.first || prevUserInfo!=userInfo){
        this.setUserInfo(userInfo)
      }
      if(this.first || prevProjectInfo.id != projectInfo.id){
        this.setProjectInfo(projectInfo)
      }
      this.first = false
    },true)
  },
  methods:{
    ...mapMutations({
        setUserInfo: 'SET_USERINFO',
        setProjectInfo: 'SET_PROJECTINFO',
        setButtonPageObj:'SET_buttonPageObj',
        setSecondRouters:"SET_SECONDROUTERS",
        setTheme:'SET_THEME'
    })
  }
}
</script>

<style scoped>

</style>
<style>
  .el-select__tags, .el-select__tags-text {
			display: inline-block;
			max-width:90px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.el-select .el-tag__close.el-icon-close {
			top: -7px!important;
		}
</style>